<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }

        h2 {
            width: 100px;
            margin: 0 auto;
            margin-top: 100px;
            color: #fff;
        }

        .loginBox {
            background-color: #fff;
            width: 450px;
            height: 250px;
            margin: 10px auto;
            border-radius: 10px;
            padding: 20px 0;
            display: flex;
            flex-direction: column;
        }

        .loginBox li {
            height: 60px;
            padding: 0 20px;
            display: flex;
            align-items: center;
        }

        label {
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 5px;
        }

        input {
            border: 1px solid #ccc;
            font-size: 14px;
            flex: 1;
            height: 30px;
        }

        #submit {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: rgb(54, 154, 222);
            border-radius: 5px;
            font-size: 24px;
            color: #fff;
            letter-spacing: 10px;
            text-align: center;
            cursor: pointer;
        }

        #submit:hover {
            background-color: rgb(79, 164, 224);
        }

        .loginBox li:nth-of-type(4) {
            justify-content: flex-end;
        }

        .loginBox li:nth-of-type(4) a {
            color: #ccc;
        }
    </style>
</head>

<body>
    <h2>登录页面</h2>
    <ul class='loginBox'>
        <li>
            <label for="username">账号：</label>
            <input type="text" id="username" placeholder="请输入账号">
        </li>
        <li>
            <label for="password">密码：</label>
            <input type="password" id="password" placeholder="请输入密码">
        </li>
        <li>
            <input type="button" id="submit" value="登录">
        </li>
        <li>
            <a href="./register.html">注册</a>
        </li>
    </ul>

</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    let usernameEl = document.getElementById('username');
    let passwordEl = document.getElementById('password');
    let submitEl = document.getElementById('submit')

    submitEl.onclick = async function () {
        let username = usernameEl.value;
        let password = passwordEl.value;
        let email = 'null'
        // try {
        //     let result =await axios({
        //         method: 'post',
        //         url: 'http://127.0.0.1:9527/api/users/login',
        //         data: {
        //             username,
        //             password,
        //             email,
        //         }
        //     })
        // } catch (error) {

        //     if (error.response.status == 401) {
        //         // 鉴权失败
        //         alert('用户未登录，请登录后进行访问')
        //     }
        // }

        let result = await axios({
            method: 'post',
            url: 'http://127.0.0.1:9527/api/users/login',
            data: {
                username,
                password,
                email,
            },
        }).then(res => {
            // data -> 服务器返回的所有数据
            let data = res.data;
            if (data.code !== 0) {
                return alert(data.msg)
            } else {
                let token = data.token;
                localStorage.setItem("token", token)
                // localStorage.token = token;
                alert(data.msg)
                let timer = setTimeout(() => {
                    localStorage.setItem("username", username)
                    location.href = './message.html'
                })
            }
        })


    }

    // console.log(localStorage);
</script>

</html>